<template>
    <el-drawer :title="$t('game.other.dictionary.drawer.details')" size="400px" :visible.sync="drawerVisible" @close="$emit('update:visible', false)">
        <vue-simplebar>
            <div class="pt-12 pb-12 pr-3" v-if="data.id">
                <el-form label-width="120px" class="detail">
                    <el-form-item label="ID">{{ data.id }}</el-form-item>
                    <el-form-item :label="$t('game.other.dictionary.classify')">
                        {{ $t(`game.other.dictionary.classifyList.${data.classify}.label`) }}
                    </el-form-item>
                    <el-form-item :label="$t('game.setting.language.name')">
                        {{ $t(`game.setting.language.languages.${data.language}.label`) }}
                    </el-form-item>
                    <el-form-item :label="$t('game.other.dictionary.content')">
                        <div v-html="data.content"></div>
                    </el-form-item>
                    <el-form-item :label="$t('game.other.dictionary.created')">
                        <component-page-timestamp :timestamp="data.created"></component-page-timestamp>
                    </el-form-item>
                </el-form>
            </div>
        </vue-simplebar>
    </el-drawer>
</template>

<script>
    export default {
        name: "ItemDetails",
        props: ['visible', 'data'],
        data() {
            return {
                drawerVisible: false,
            }
        },
        watch: {
            visible: function (n, o) {
                if (n) {
                    // 显示抽屉
                    this.drawerVisible = n;
                }
            }
        },
    }
</script>

<style scoped>

</style>
